<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            width: 100%;
        }

        .box1 {
            position: relative;
            height: 50px;
            width: 50px;
            left: 0;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>滑动移动元素</h1>
        <div id="parent1" style="width: 200px; height: 50px; border: 1px solid red;">
            <div class="box1"></div>
        </div>
    </div>
    <script>
        let parent1 = document.getElementById('parent1')
        let box1 = document.getElementsByClassName('box1')[0]
        console.log('元素的位置左边', box1.offsetLeft); //元素的距离左边的位置
        console.log('元素的位置上边', box1.offsetTop); //元素的距离上边的位置
        console.dir(parent1);
        box1.onmousedown = function (ev) {//鼠标按下事件
            let dx = event.clientX - box1.offsetLeft;
            let dy = event.clientY - box1.offsetTop;
            document.onmousemove = function (ev) {
                box1.style.left = event.clientX - dx + 'px'
                // box1.style.top=event.clientY - dy + 'px'
            }
            document.onmouseup = function () {
                document.onmousemove = null
                document.onmouseup = null
            }
        }
    </script>
</body>

</html>